Vue.component('xcchart_control_bar', {
  template: '<div><div ref="chart" style="width: 100%; height: 400px;"></div></div>',
  props: {
    value: {
      type: Object,
    },
    fieldfulljson: {
      type: Array,
    },
    xcform_id: {
      type: Number,
    }
  },
  data() {
    return {
      xcchart_base_xctitle:this.value['fieldjsonObj']['xcchart_base_xctitle'],
      xcchart_data_dim:this.value['fieldjsonObj']['xcchart_data_dim'],
      xcchart_data_facts:this.value['fieldjsonObj']['xcchart_data_facts'],
      control: {}
    };
  },
  created() {
    var that = this;
  },
  mounted() {
    var that = this;
    that.xinit();

  },
  methods: {
    xinit() {
      let that = this;

      const chartDom = this.$refs.chart;
      that.myChart = echarts.init(chartDom);
      that.setOptionDebounce(that.myChart)
    },
    setOptionDebounce(myChart) {
      let that = this;
      Fast.api.ajax({
        url: Fast.api.fixurl(Config.controlPath + "getXcchartOptions"),
        method: 'get',
        data: {
          xcform_id: that.xcform_id,
          __vModel__: that.value.__vModel__,
        }
      }, function (data, ret) {
        let dimlables = data.dimlables;
        let facts = data.facts;

        let xAxis_data = dimlables;
        let series = [];
        for (let index in facts) {
          series.push({
            name: that.xcchart_data_facts['values'][index]['name'],
            type: that.xcchart_data_facts['values'][index]['type'],
            data: facts[index]
          });
        }

        const option = {
          title: {
            text: that.xcchart_base_xctitle.value
          },
          tooltip: {},
          xAxis: {
            data: xAxis_data
          },
          yAxis: {},
          series: series
        };
        myChart.setOption(option);

        return false;
      });
    }
  }
});